<script>
export default {
  data() {
    return {
      form: {},
      id: JSON.parse(localStorage.getItem("user")).id,
      status: JSON.parse(localStorage.getItem("user")).status

    }
  },
  created() {
    this.getMyInfo()
  },
  methods: {
    submit() {
      this.$confirm('您确定要修改吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
            if (this.status === 1) {
              this.request.post('teacher/teacher/updateById', this.form)
                  .then(res => {
                    if (res.code === 200) {
                      this.$message.success(res.message);
                      this.getMyInfo()
                      this.$store.dispatch('updateInfo', {user: this.form});
                    }
                  })
            }else if (this.status===2){
              this.request.post('student/student/updateById', this.form)
                  .then(res => {
                    if (res.code === 200) {
                      this.$message.success(res.message);
                      this.getMyInfo()
                      this.$store.dispatch('updateInfo', {user: this.form});
                    }
                  })
            }

      }).catch(() => {
        // 如果用户点击取消按钮或关闭对话框，可以在这里执行一些操作
        // 通常情况下，这里不需要做任何事情
      });
    },
    getMyInfo() {
      console.log(this.status)
      if (this.status === 1) {
        this.request.get('/teacher/teacher/findById/' + this.id)
            .then(res => {
              console.log(res)
              this.form = res.user
            })
      }else if (this.status===2){
        this.request.get('/student/student/findById/' + this.id)
            .then(res => {
              console.log(res)
              this.form = res.user
            })
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.form.avatar = file.url;
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleUploadSuccess(res, file) {
      console.log(res, 'res')
      console.log(file, 'file')
      this.form.avatar = res.msg

      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      console.log(file.type, 'file')
      const isJPG = file.type === 'image/jpeg';
      const isPng = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPng) {
        this.$message.error('上传头像图片只能是 JPG或PNG格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG || isPng) && isLt2M;
    },
  }
}
</script>

<template>
  <div class="animate__animated animate__fadeInLeft"
       style="display: flex; justify-content: center; align-items: center; height: 80vh;">
    <el-card style="width: 45%;">
      <el-form label-width="100px">
        <el-form-item prop="avatar">
          <div class="avatar-container">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8888/api/minio/upload"
                :show-file-list="false"
                :on-preview="handlePictureCardPreview"
                :on-success="handleUploadSuccess"
                :before-upload="beforeAvatarUpload"
            >
              <img style="width: 100px; height: 100px; border-radius: 50%; margin-left: 180px" v-if="form.avatar"
                   :src="form.avatar" class="avatar" alt="">

              <el-button v-else size="small" v-if="form.avatar===null" type="primary">上传头像</el-button>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item style="display: none;">
          <el-input v-model="form.id" type="hidden"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮箱">
          <el-input disabled v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="介绍" >
          <el-input v-model="form.description" autocomplete="off" placeholder="请输入介绍(不超过20个字)"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <el-input v-model="form.status" style="display: none;"></el-input>


        <el-form-item label="生日">
          <el-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="margin-left: 200px" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<style scoped>

</style>